<template>
  <div class="box">
    <header class="newheader">
      <span :class="item.icon" v-for="(item, index) of list" :key="index"></span>
      <p>消息</p>
    </header>
    <div class="new-content">
      <ul>
        <li v-for="(news, newsindex) of newslist" :key="newsindex">
          <img :src="news.headimg" alt="">
          <p><span class="span1">{{news.chatperson}}</span><span class="span2">{{news.time}}</span></p>
          <p>{{news.chatinfo}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {icon: 'iconfont icon-jiahao1'},
        {icon: 'iconfont icon-dashujukeshihuaico-'},
        {icon: 'iconfont icon-jiahao-fill'}
      ],
      newslist: [
        {
          chatperson: 'chatperson1',
          time: '11:11',
          headimg: 'https://gss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3468780367,166286784&fm=173&app=49&f=JPEG?w=218&h=146&s=C5F03CC4E4E119240FBA193103005050',
          chatinfo: '今天下雪了'
        },
        {
          chatperson: 'chatperson2',
          time: '11:11',
          headimg: 'https://tgi1.jia.com/119/624/19624632.jpg',
          chatinfo: '今天下雪了你看见没'
        },
        {
          chatperson: 'chatperson3',
          time: '11:11',
          headimg: 'http://img0.imgtn.bdimg.com/it/u=2577022489,1269768065&fm=26&gp=0.jpg',
          chatinfo: '下雪了快来看'
        },
        {
          chatperson: 'chatperson4',
          time: '11:11',
          headimg: 'https://f12.baidu.com/it/u=4217384801,233573198&fm=173&app=49&f=JPEG?w=640&h=427&s=16009E4E4E8B0A4D0EBE357B03008058&access=215967316',
          chatinfo: '带宝宝下来看雪花呀'
        },
        {
          chatperson: 'chatperson5',
          time: '11:11',
          headimg: 'https://gss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3468780367,166286784&fm=173&app=49&f=JPEG?w=218&h=146&s=C5F03CC4E4E119240FBA193103005050',
          chatinfo: '今天下雪了哈哈'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
// 头部
.box{
  .newheader{
    width:3.75rem;
    height:0.42rem;
    line-height:0.37rem;
    background:rgb(240, 240, 240);
    .icon-jiahao1{
      font-size:0.20rem;
      float:left;
      margin-left:0.18rem;
    }
    .icon-dashujukeshihuaico- {
      float:left;
      font-size:0.20rem;
    }
    .icon-jiahao-fill{
      font-size:0.20rem;
      float:right;
      margin-right:0.14rem;
    }
    p{
      font-size:0.20rem;
      float: left;
      width:0.94rem;
      font-size:0.14rem;
      text-align:center;
      margin-left: 0.77rem;
    }
  }
  // 聊天部分
  .new-content{
    overflow-y: scroll;
    flex:box;
    flex:1;
    ul{
      li{
        width:3.75rem;
        height:0.8rem;
        border-bottom:1px solid #ccc;
        img{
          width:0.4rem;
          height:0.4rem;
          border-radius:0.2rem;
          float:left;
          margin-top:0.19rem;
          margin-left:0.18rem
        };
        p{
          width:3rem;
          height:0.2rem;
          line-height:0.2rem;
          float:right;
          margin-right:0.11rem;
          &:nth-of-type(1){
            margin-top:0.19rem;
            .span1{
              font-size:0.14rem;
              float:left
            }
            .span2{
              font-size:0.10rem;
              float:right
            }
          };
          &:nth-of-type(2){
              font-size:0.12rem;
          }
        }
      }
    }
  }
}
</style>
